<template>
  <el-menu :default-active="activeIndex">
    <el-menu-item v-for="item in menuList" :key="item.path" :index="item.path">
      <span>{{ item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const menuList = computed(() => {
  return (
    (
      route.matched[0].meta as {
        subMenu: {
          config: {
            path: string;
            label: string;
          }[];
        };
      }
    ).subMenu.config || []
  );
});

const activeIndex = computed(() => {
  return menuList.value.find(item => route.path.startsWith(item.path))?.path
})
</script>
